<template>
  <div class="api-designer">
    <div class="flow-designer-header">
      <ApiLayoutHeader
        v-model="activeSelect"
        @input="changeActiveSelect"
        @draft="draft"
        @publish="saveApi"
      />
    </div>

    <div class="api-designer-body">
      <div class="layout-body">
        <api-basic-info
          ref="baseSettingRef"
          v-show="activeSelect === TabName.baseSetting"
          :dsgn-item="dsgnItem"
        />
        <api-debug ref="apiDebugConfigRef" v-show="activeSelect === TabName.apiDebugConfig" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  DesignerMixinData,
  useDesignerMixin,
  WebDesignerMode
} from '@/components/Designer/mixins/DesignerMixin'
import { useApprovalDesignerStore } from '@/store/modules/dsgn/ApprovalDesigner'

import { TabName } from './index'

defineOptions({
  name: 'ApiDesigner'
})

const props = defineProps({
  propMixin: Object as PropType<DesignerMixinData>,
  formMode: {
    type: Number,
    default: WebDesignerMode.FormCreate
  },
  procMode: {
    type: Number,
    default: WebDesignerMode.FlowDesigner
  }
})

const designerStore = useApprovalDesignerStore()

const message = useMessage() // 消息弹窗
const dsgnItem = props.propMixin.dsgnItem
const actionItem = props.propMixin.actionItem
const loading = ref(true)
const useDesigner = useDesignerMixin(props.propMixin)
provide('designerMixin', useDesigner)

const loadSbuComponent = ref(false)
const activeSelect = ref(TabName.baseSetting)

const dsgnModelId = ref('')
const baseSettingRef = ref()
const apiDebugConfigRef = ref()
const tblColumnConfigRef = ref()

const designerModel = designerStore.designerModel

const changeActiveSelect = (newSelAct: string) => {
  activeSelect.value = newSelAct
  if (activeSelect.value === TabName.apiDebugConfig) {
    // updateFormDsgnConfig()
  }
}

// const designerVo = ref<DsgnVo>(new DsgnVo())
// const approvalBasicVo = ref<DsgnBasicVo>(new DsgnBasicVo())
// const approvalFormVo = ref<DsgnFormVo>(new DsgnFormVo())
// const approvalProcVo = ref<DsgnProcVo>(new DsgnProcVo())
// const approvalExtVo = ref<DsgnExtVo>(new DsgnExtVo())
</script>

<style scoped lang="scss">
.api-designer-body {
  min-height: calc(100vh - 124px);
  position: relative;
  border-radius: 5px;
}
</style>
